<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="打印表格(函数).js" type="text/javascript"></script>
    <style>
        *{margin: 0px;padding: 0px}
        ul{
            /*这里，ul最好不要加上margin值，要不然出来的坐标就不是鼠标的坐标*/
            width: 100px;
            list-style: none;
            background: #999999;
            position: absolute;
            display: none;
        }
        ul li{
            line-height:30px ;
            text-align: center;
            margin-top: 10px;
            color: white;
        }
    </style>
</head>
<body>
    <ul id="box">
        <li>健康</li>
        <li>毕业</li>
        <li>幸福</li>
        <li>有钱</li>
    </ul>
    <script type="text/javascript">
        //1,给文档对象添加鼠标右击事件
        document.oncontextmenu = function (event) {
            //2,通过事件对象获取鼠标的坐标
            var x = event.clientX;
            var y = event.clientY;

            //3,显示菜单，并且设置坐标为鼠标的坐标
            var box = document.getElementById("box");
            box.style.display = "block";
            box.style.left = x+"px";
            box.style.top = y+"px";

            //4,组织浏览器默认行为（右击就会出现系统自带菜单）
            return false;
        }


        //5,给文本对象添加鼠标左击事件
        document.onclick = function () {
            var box = document.getElementById("box");
            box.style.display = "none";
        }
    </script>

</body>
</html>